<template>
    <view class="search-page">
        <!-- 搜索头部 -->
        <view class="search-header">
            <view class="search-box">
                <text class="iconfont icon-search"></text>
                <input type="text" v-model="keyword" placeholder="请输入关键词搜索" focus @input="onSearch" />
            </view>
            <text class="cancel-btn" @tap="goBack">取消</text>
        </view>

        <!-- 历史搜索 -->
        <view class="history-section" v-if="!keyword">
            <view class="history-header">
                <text class="title">历史搜索</text>
                <text class="clear-btn" @tap="clearHistory">清空</text>
            </view>
            <view class="history-tags">
                <view class="tag" v-for="(item, index) in searchHistory" :key="index" @tap="useHistory(item)">
                    {{ item }}
                </view>
            </view>
        </view>

        <!-- 搜索结果 -->
        <view class="search-result" v-else>
            <view class="store-item" v-for="(item, index) in searchResults" :key="index" @tap="selectStore(item)">
                <view class="store-name">{{ item.name }}</view>
                <view class="store-address">{{ item.address }}</view>
                <view class="store-info">
                    <text class="business-hours">营业时间: {{ item.businessHours }}</text>
                    <text class="distance">{{ item.distance }}公里</text>
                </view>
            </view>
            <view class="no-result" v-if="searchResults.length === 0">
                未找到相关门店
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            searchResults: [],
            searchHistory: ['王企鹅'],  // 默认历史搜索数据
            allStores: [] // 将从store页面传来的数据存储在这里
        }
    },
    onLoad() {
        // 获取本地存储的搜索历史
        const history = uni.getStorageSync('searchHistory') || [];
        this.searchHistory = history;

        // 获取所有门店数据
        const stores = uni.getStorageSync('allStores') || [];
        this.allStores = stores;
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        onSearch() {
            if (!this.keyword) {
                this.searchResults = [];
                return;
            }

            // 搜索逻辑
            this.searchResults = this.allStores.filter(store =>
                store.name.toLowerCase().includes(this.keyword.toLowerCase()) ||
                store.address.toLowerCase().includes(this.keyword.toLowerCase())
            );
        },
        selectStore(store) {
            // 保存搜索历史
            if (this.keyword) {
                const history = new Set([this.keyword, ...this.searchHistory]);
                this.searchHistory = Array.from(history).slice(0, 10);
                uni.setStorageSync('searchHistory', this.searchHistory);
            }

            // 返回上一页并传递选中的门店
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];
            if (prevPage) {
                prevPage.$vm.selectStore(store);
            }
            uni.navigateBack();
        },
        useHistory(keyword) {
            this.keyword = keyword;
            this.onSearch();
        },
        clearHistory() {
            uni.showModal({
                title: '提示',
                content: '确定要清空搜索历史吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.searchHistory = [];
                        uni.removeStorageSync('searchHistory');
                    }
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.search-page {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.search-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;

    .search-box {
        flex: 1;
        display: flex;
        align-items: center;
        height: 72rpx;
        background-color: #f5f5f5;
        border-radius: 36rpx;
        padding: 0 30rpx;
        margin-right: 20rpx;

        .icon-search {
            color: #999;
            font-size: 32rpx;
            margin-right: 10rpx;
        }

        input {
            flex: 1;
            font-size: 28rpx;
        }
    }

    .cancel-btn {
        font-size: 28rpx;
        color: #333;
        padding: 10rpx;
    }
}

.history-section {
    padding: 30rpx;

    .history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .title {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
        }

        .clear-btn {
            font-size: 28rpx;
            color: #0066ff;
        }
    }

    .history-tags {
        display: flex;
        flex-wrap: wrap;

        .tag {
            padding: 12rpx 24rpx;
            background-color: #f5f5f5;
            border-radius: 32rpx;
            font-size: 28rpx;
            color: #333;
            margin-right: 20rpx;
            margin-bottom: 20rpx;

            &:active {
                opacity: 0.7;
            }
        }
    }
}

.search-result {
    padding: 20rpx 30rpx;

    .store-item {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .store-name {
            font-size: 32rpx;
            font-weight: 500;
            margin-bottom: 12rpx;
        }

        .store-address {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 12rpx;
        }

        .store-info {
            display: flex;
            justify-content: space-between;
            font-size: 26rpx;
            color: #999;

            .distance {
                color: #666;
            }
        }
    }

    .no-result {
        text-align: center;
        color: #999;
        font-size: 28rpx;
        padding: 40rpx 0;
    }
}
</style>